<template>
  <div>
    <div id="myChart"></div>
    <div id="myChart2"></div>
  </div>
</template>

<script>
export default {
  name: "Echarts",
  layout: "admin",
  data() {
    return {
      clist: [],
      dlist: [],
      alist: []
    };
  },
  created() {
    this.$axios.get("/api2/statstic/list").then(res => {
      let data = res.data;
      this.clist = data.clist;
      this.dlist = data.dlist;
      this.alist = data.alist;
      this.echartsInit();
      this.echartsInit2();
    });
  },
  methods: {
    echartsInit() {
      // 找到容器
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 开始渲染
      myChart.setOption({
        title: { text: "网站访问流量" },
        tooltip: {},
        xAxis: {
          data: this.dlist
        },
        yAxis: {},
        series: [
          {
            name: "访问量",
            type: "line",
            data: this.clist,
            smooth: true
          }
        ]
      });
    },
    echartsInit2() {
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      myChart.setOption({
        title: { text: "每天文章发布数量" },
        xAxis: {
          data: this.dlist
        },
        yAxis: {},
        series: [
          {
            name: "发布量",
            type: "bar",
            smooth: true,
            data: this.alist
          }
        ]
      });
    }
  },
  mounted() {}
};
</script>
 
<style scoped>
#myChart {
  width: 1500px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  /* float: left; */
}
#myChart2 {
  width: 1500px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  /* float: right; */
}
</style>
